<%--
  Created by IntelliJ IDEA.
  User: kuankuan
  Date: 2023/3/7
  Time: 9:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <script src="/js/jquery-1.12.4.min.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <style>
        td{
            height: 150px;
            width: 100px;
        }
        body {
            background: none repeat scroll 0 0 #D8EDFC;
            margin: 0;
            padding: 0;
        }
        .tab-container {

            width: 100%;
        }

        .tab-header {
            display: flex;
            flex-wrap: nowrap;
            background-color: steelblue;
            color: white;
        }

        .tab-header>div {
            width: 34%;
            display: inline-block;
            padding: 5px 10px;
            text-align: left;
            border-right: 1px solid white;
        }

        .tab-header>div:hover {
            opacity: 0.85;
            cursor: pointer;
        }

        .active {
            color: black;
        }

        .tab-body {
            padding: 10px;
            height: 260px;
        }
    </style>
</head>
<body>
<div  class="tab-container">
    <div class="tab-header">
        <div id="tab1" class="active" data-body="body1"> 川菜</div>
        <div id="tab2" data-body="body2">杭邦菜</div>
        <div id="tab3" data-body="body3">东北菜</div>
        <div id="tab4" data-body="body4">粤菜</div>
        <div id="tab5" data-body="body5">湘菜</div>
    </div>
    <div class="tab-body">
        <div id="body1" style="display: block;">
            <table width="600" align="center"  class="table table-striped table table-bordered">
                <tbody>
                <c:forEach var="food" items="${requestScope.pageBean2.datas}">
                    <c:if test="${food.type_id==1}">
                    <tr>
                        <td>${food.food_name}<br>价格:￥${food.food_price}<br>介绍：${food.food_desc}</td>
                        <td><img src="${food.food_image}" style="width: 150px; height: 150px"></td>
                        <td><div style="display: block; height: 60px"></div>
                            <button onclick="add(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                            <button onclick="sub(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
                        </td>
                    </tr>
                    </c:if>
                </c:forEach>
                <tr>
                    <td colspan="3" align="center"><button onclick="see_cart()"class="btn btn-default btn-lg dropdown-toggle glyphicon glyphicon-shopping-cart" ><span class="cnt">0</span></button></td>
                    <button onclick="back()">返回上一页</button>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="display: none;" id="body2">
            <table width="600" align="center"  class="table table-striped table table-bordered">
                <tbody>
                <c:forEach var="food" items="${requestScope.pageBean2.datas}">
                    <c:if test="${food.type_id==4}">
                        <tr>
                            <td>${food.food_name}<br>价格:￥${food.food_price}<br>介绍：${food.food_desc}</td>
                            <td><img src="${food.food_image}" style="width: 150px; height: 150px"></td>
                            <td><div style="display: block; height: 60px"></div>
                                <button onclick="add(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                <button onclick="sub(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
                            </td>
                        </tr>
                    </c:if>
                </c:forEach>
                <tr>
                    <td colspan="3" align="center"><button onclick="see_cart()"class="btn btn-default btn-lg dropdown-toggle glyphicon glyphicon-shopping-cart" ><span class="cnt">0</span></button></td>
                    <button onclick="back()">返回上一页</button>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="display: none;" id="body3">
            <table width="600" align="center"  class="table table-striped table table-bordered">
                <tbody>
                <c:forEach var="food" items="${requestScope.pageBean2.datas}">
                    <c:if test="${food.type_id==5}">
                        <tr>
                            <td>${food.food_name}<br>价格:${food.food_price}<br>介绍：${food.food_desc}</td>
                            <td><img src="${food.food_image}" style="width: 150px; height: 150px"></td>
                            <td><div style="display: block; height: 60px"></div>
                                <button onclick="add(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                <button onclick="sub(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
                            </td>
                        </tr>
                    </c:if>
                </c:forEach>
                <tr>
                    <td colspan="3" align="center"><button onclick="see_cart()"class="btn btn-default btn-lg dropdown-toggle glyphicon glyphicon-shopping-cart" ><span class="cnt">0</span></button></td>
                    <button onclick="back()">返回上一页</button>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="display: none;" id="body4">
            <table width="600" align="center"  class="table table-striped table table-bordered">
                <tbody>
                <c:forEach var="food" items="${requestScope.pageBean2.datas}">
                    <c:if test="${food.type_id==6}">
                        <tr>
                            <td>${food.food_name}<br>价格:${food.food_price}<br>介绍：${food.food_desc}</td>
                            <td><img src="${food.food_image}" style="width: 150px; height: 150px"></td>
                            <td><div style="display: block; height: 60px"></div>
                                <button onclick="add(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                <button onclick="sub(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
                            </td>
                        </tr>
                    </c:if>
                </c:forEach>
                <tr>
                    <td colspan="3" align="center"><button onclick="see_cart()"class="btn btn-default btn-lg dropdown-toggle glyphicon glyphicon-shopping-cart" ><span class="cnt">0</span></button></td>
                    <button onclick="back()">返回上一页</button>
                </tr>
                </tbody>
            </table>
        </div>
        <div style="display: none;" id="body5">
            <table width="600" align="center"  class="table table-striped table table-bordered">
                <tbody>
                <c:forEach var="food" items="${requestScope.pageBean2.datas}">
                    <c:if test="${food.type_id==7}">
                        <tr>
                            <td>${food.food_name}<br>价格:${food.food_price}<br>介绍：${food.food_desc}</td>
                            <td><img src="${food.food_image}" style="width: 150px; height: 150px"></td>
                            <td><div style="display: block; height: 60px"></div>
                                <button onclick="add(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-plus" aria-hidden="true"></span></button>
                                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                                <button onclick="sub(${food.food_id}, ${requestScope.table_id})"><span class="glyphicon glyphicon-minus" aria-hidden="true"></span></button>
                            </td>
                        </tr>
                    </c:if>
                </c:forEach>
                <tr>
                    <td colspan="3" align="center"><button onclick="see_cart()"class="btn btn-default btn-lg dropdown-toggle glyphicon glyphicon-shopping-cart" ><span class="cnt">0</span></button></td>
                    <button onclick="back()">返回上一页</button>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script>
    function rest_tab() {
        $("#tab1").attr("class", "")
        $("#tab2").attr("class", "")
        $("#tab3").attr("class", "")
        $("#tab4").attr("class", "")
        $("#tab5").attr("class", "")
        $("#body2").attr("style", "display: none;")
        $("#body1").attr("style", "display: none;")
        $("#body3").attr("style", "display: none;")
        $("#body4").attr("style", "display: none;")
        $("#body5").attr("style", "display: none;")
    }
    $("#tab1").click(function() {
        rest_tab()
        $("#tab1").attr("class", "active")
        $("#body1").attr("style", "display:'block;'")
    })
    $("#tab2").click(function() {
        rest_tab()
        $("#tab2").attr("class", "active")
        $("#body2").attr("style", "display:'block;'")
    })
    $("#tab3").click(function() {
        rest_tab()
        $("#tab3").attr("class", "active")
        $("#body3").attr("style", "display:'block;'")
    })
    $("#tab4").click(function() {
        rest_tab()
        $("#tab4").attr("class", "active")
        $("#body4").attr("style", "display:'block;'")
    })
    $("#tab5").click(function() {
        rest_tab()
        $("#tab5").attr("class", "active")
        $("#body5").attr("style", "display:'block;'")
    })
    var total=0;
    function add(food_id, table_id) {
        total++;
        showCnt();
        fetch("/cart?action=add&table="+table_id+"&food="+food_id, {
            method: "put"
        }).then(response=>response.text()).then(data=>{
            alert(data);
        })
    }
    function sub(food_id, table_id) {
        total--;
        showCnt();
        fetch("/cart?action=sub&table="+table_id+"&food="+food_id, {
            method: "put"
        }).then(response=>response.text()).then(data=>{
            alert(data);
        })
    }
    function see_cart() {
        open("/cart?table="+${requestScope.table_id}, "_self")
    }

    function showCnt() {
        $(".cnt").text(total)
    }

    function back() {
        open("/userlook1","_self")
    }

</script>
</body>
</html>
